<template>
    <div class="log-list">
        <div class="condition">
            <el-input v-model="log.loginCode" placeholder="登陆账号" class="condition-input"></el-input>
            <el-tooltip content="按条件查询"><el-button type="primary" class="sub-query" @click="queryCondition(false)">查询</el-button></el-tooltip>
            <el-tooltip content="清空条件"><el-button type="default" class="sub-query" @click="clearCondition">清空</el-button></el-tooltip>
        </div>

        <el-table v-loading="loading" :data="listData" stripe border style="width: 98%;margin-left: 1%;margin-top: 15px"  :cell-style="rowClass" :header-cell-style="headClass">
            <el-table-column type="index" :index="indexMethod"> </el-table-column>
            <el-table-column prop="loginCode" label="登陆账号" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="userNick" label="用户昵称" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="clientIp" label="客户端地址" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="browserName" label="浏览器" width="200" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="loginTime" label="登陆时间" width="250" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="isException" label="是否异常" width="100" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.isException=='1'" style="color:red">异常</span>
                    <span v-if="scope.row.isException=='2'" style="color: green">正常</span>
                </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" width="300" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column fixed="right" label="操作" width="180" style="text-align: center">
                <template slot-scope="scope">
                    <el-tooltip content="删除"><el-button circle size="mini" type="warning" plain @click="openTips(scope.$index,scope.row.id,3)"><i class="el-icon-delete"></i></el-button></el-tooltip>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="操作提示" :visible.sync="updateStatus.tipsBox" width="30%">
            <span v-if="updateStatus.status == '1'">是否确认启用此条数据？</span>
            <span v-if="updateStatus.status == '2'">是否确认停用此条数据？</span>
            <span v-if="updateStatus.status == '3'">是否确认删除此条数据？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateStatus.tipsBox=false">取 消</el-button>
                <el-button type="primary"  @click="saveStatus()">确 定</el-button>
            </span>
        </el-dialog>



        <div class="block">
            <el-pagination @size-change="pageSizeChange" @current-change="pageNoChange"
                           :current-page="this.log.pageNo"
                           :page-sizes="[10, 20, 40, 60]"
                           :page-size="this.log.pageSize"
                           layout="total, sizes, prev, pager, next"
                           :total="this.log.total">
            </el-pagination>
        </div>


    </div>
</template>

<script>
    import logApi from '@/api/log/logApi'
    export default {
        name: "LogList",
        data() {
            return {
                loading: true,  //请求加载
                updateStatus: {  //修改状态
                    tipsBox: false,
                    index: '',
                    id: '',
                    status: '',
                },
                listData: [],  //表格数据
                log: {   //查询条件
                    loginCode:'',
                    status: '',
                    pageNo: 1,
                    pageSize: 20,
                    total: 0,
                },
                isSystemItem: [{value: "1", label: "系统参数"}, {value: "2", label: "普通参数"}],
            }
        },
        methods:{
            indexMethod(i){
                return i+1
            },
            headClass () {
                return 'text-align: center;background:#eef1f6;'
            },
            rowClass () {
                return 'text-align: center;'
            },
            async pageSizeChange(val){
                this.log.pageSize = val
                this.queryCondition(true);
            },
            async pageNoChange(val){
                this.log.pageNo = val
                this.queryCondition(true);
            },
            async queryCondition(isPage){
                if (!isPage){
                    this.log.pageNo=1
                }
                this.loading = true
                const res = await logApi.getList(this.log)
                if (res.code == '200'){
                    this.log.total = res.data.total
                    this.listData = res.data.records
                    this.loading = false;
                }else{
                    this.$message.error(res.msg)
                }
            },
            openTips(index,id,status){
                this.updateStatus.index = index
                this.updateStatus.id = id
                this.updateStatus.status = status
                this.updateStatus.tipsBox = true
            },
            async saveStatus(){
                this.updateStatus.tipsBox=false
                const res = await logApi.saveStatus(this.updateStatus.id,this.updateStatus.status)
                if (res.code == '200'){
                    this.$message.success("操作成功")
                    if (this.updateStatus.status == '1'){
                        this.listData[this.updateStatus.index].status = 1
                    }
                    if (this.updateStatus.status == '2'){
                        this.listData[this.updateStatus.index].status = 2
                    }
                    if (this.updateStatus.status == '3'){
                        this.listData.splice(this.updateStatus.index,1)
                    }
                }
            },
            clearCondition(){
                this.log.loginCode='';
            }
        },
        created:async function (){
            const res = await logApi.getList(this.log)
            if (res.code == '200'){
                this.log.total = res.data.total
                this.listData = res.data.records
                this.loading = false;
            }else{
                this.$message.error(res.msg)
            }
        }
    }
</script>

<style scoped>

</style>